<template>
<view class='component-container'>
    <view class="card-header">
        <img src="" class="header-img"></img>
        <view class="header-right">
            <view class="right-header">
                <view class="info-title">{{ setMealInfo.title }}</view>
                <view class="status" v-if="setMealInfo.status === 0">待预约</view>
            </view>
            <view class="info-label">
                <text v-for="(label, index) in setMealInfo.label" :key="index">
                    {{ label }}<text v-if="index < setMealInfo.label.length - 1"> · </text>
                </text>
            </view>
            <view class="price" v-if="setMealInfo.price">￥ {{ setMealInfo.price }}</view>
        </view>
    </view>
    <view class="card-divider" v-if="setMealInfo.lineBtnText || setMealInfo.coverBtnText"></view>
    <view class="btn-row">
        <button class="line-btn" v-if="setMealInfo.lineBtnText">{{ setMealInfo.lineBtnText }}</button>
        <button class="cover-btn" v-if="setMealInfo.coverBtnText">{{ setMealInfo.coverBtnText }}</button>
    </view>
</view>
</template>

<script>
export default {
    props: {
        setMealInfo: {
            type:Object,
            default: () => ({
                imgPath:'',
                status:null,
                title:'',
                label:[],
                lineBtnText:'',
                coverBtnText:''
            })
        }
    }
}
</script>

<style lang='scss' scoped>
.component-container {
    background: #fff;
    border-radius: 16rpx;
    margin: 25rpx 0 0 0;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
    padding: 24rpx 32rpx 0 32rpx;
}
.card-header {
    display: flex;
}
.header-img {
    height: 118rpx;
    width: 118rpx;
    border-radius: 22rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}
.header-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 60rpx;
}
.right-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8rpx;
}
.status {
    background: #eba242;
    color: #fff;
    font-size: 24rpx;
    border-radius: 8rpx;
    padding: 4rpx 18rpx;
    right: 8rpx;
}
.info-title {
    font-size: 32rpx;
}
.info-label {
    font-size: 26rpx;
    color: #888;
}
.price {
    color: rgb(209, 25, 25);
}
.card-divider {
    height: 1rpx;
    border-top: 1rpx dashed #e0e0e0;
    margin: 18rpx 0 18rpx 0;
    width: 100%;
}
.btn-row {
    display: flex;
    justify-content: space-between;
    padding: 10rpx 0 30rpx;
}
.line-btn {
    width: 48%;
    height: 64rpx;
    background: #fff;
    color: #1ec6e6;
    font-size: 28rpx;
    border-radius: 44rpx;
    border: 1rpx solid #1ec6e6;
    text-align: center;
    line-height: 64rpx;
}
.cover-btn {
    width: 48%;
    height: 64rpx;
    background: linear-gradient(90deg, #6ed6f7 0%, #3ec6e7 100%);
    color: #fff;
    font-size: 28rpx;
    border-radius: 44rpx;
    text-align: center;
    line-height: 64rpx;
    border: none;
}
</style>
